<template>
    <div>
      <el-tabs
        v-model="tabActiveName"
        @tab-click="handleClick"
      >
        <template v-for="(item, index) in list" :key="index">
          <el-tab-pane :label="item.title" :name="item.eng_field">
            <!--  -->
            <help v-if="item.desc" type="error">{{item.desc}}</help>
            <!-- 子级 -->
            <div class="tab-sub-box" v-if="tabActiveItem.children && tabActiveItem.children.length > 0">
              <el-radio-group
                size="default"
                v-model="itemActive"
                @change="setTab"
              >
                <template
                  v-for="(items, idx) in tabActiveItem.children"
                  :key="idx"
                >
                  <el-radio-button :label="items.eng_field">{{
                    items.title
                  }}</el-radio-button>
                </template>
              </el-radio-group>
            </div>
          </el-tab-pane>
        </template>
      </el-tabs>
      <div class="mt20">
        <basicUpdateForm
          ref="basicUpdateFormRef"
        ></basicUpdateForm>
      </div>
    </div>
  </template>
  <script lang="ts">
  export default {
    name:'basicTypeDefault'
  }
  </script>
  <script lang="ts" setup>
  import { ref, getCurrentInstance, onMounted,nextTick } from "vue";
  import type { TabsPaneContext } from "element-plus";
  
  import basicUpdateForm from "@/components/basic/update-form.vue";
  
  const props = withDefaults(defineProps<{
      detail?: any;
      list?: any;
  }>(), {
      detail:{},
      list: []
  });
  const { proxy } = getCurrentInstance() as any;
  
  const {
    proxy: { $utils },
  } = getCurrentInstance() as any;
  
  const basicUpdateFormRef = ref<HTMLElement>();
  
  const tabActiveName = ref<string>("");
  
  const itemActive = ref<string>("");
  
  const tabActiveItem: any = ref({});
  
  const tabId = ref();
  
  const toInit = () => {
    tabActiveItem.value = props.list[0];
    initActive();
  };
  
  const handleClick = (tab:typeof TabsPaneContext, event: Event) => {
    tabActiveItem.value = $utils.getArrayItemByKeyValue(
      props.list,
      "eng_field",
      tab.paneName
    );
    initActive();
  }
  const setTab = (val: string) => {
    let tabItem = $utils.getArrayItemByKeyValue(
      tabActiveItem.value.children,
      "eng_field",
      val
    );
    tabId.value = tabItem.id || 0;
    initForm();
  };
  
  const initActive = () => {
    console.log(props.list)
    console.log(props.detail)
    if(tabActiveItem.value == undefined){
        tabActiveItem.value = props.detail
    }
    tabActiveName.value = tabActiveItem.value.eng_field;
    tabId.value = tabActiveItem.value.id;
    if (tabActiveItem.value?.children && tabActiveItem.value?.children.length > 0) {
      itemActive.value = tabActiveItem.value?.children[0]?.eng_field || "";
      tabId.value = tabActiveItem.value?.children[0]?.id;
    }
    initForm();
  };
  
  const initForm = () => {
    nextTick(() => {
      proxy?.$refs["basicUpdateFormRef"]?.toInit(tabId.value);
    });
  }
  
  onMounted(()=>{
    toInit()
  })
  </script>
  